<template>
  <!-- 路由切换时加入动画效果 -->
  <router-view v-slot="{ Component }" class="router-view">
    <!-- <transition :name="transitionName">
      <component :is="Component" />
    </transition> -->
    <transition mode="out-in" :enter-active-class="transitionName" style="animation-duration:400ms">
      <component :is="Component" />
    </transition>
  </router-view>
  <NavBar v-show="isShowNav"></NavBar>
</template>

<script lang="ts" setup>
import { reactive, watch, ref } from "vue";
import { useRouter } from "vue-router";
import NavBar from "./components/NavBar.vue";
const isShowNav = ref(true);
const router = useRouter();
const showMenuList = reactive(["/", "home", "category", "cart", "user"]);
const transitionName = ref<string>("animate__animated animate__slideInRight");
watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    const currentName = newValue.name ? newValue.name.toString() : "/";
    if (showMenuList.includes(currentName)) {
      isShowNav.value = true;
    } else {
      isShowNav.value = false;
    }
    if ((newValue.meta.index as number) < (oldValue?.meta.index as number)) {
      transitionName.value = "animate__animated animate__slideInRight";
    } else if (
      (newValue.meta.index as number) > (oldValue?.meta.index as number)
    ) {
      transitionName.value = "animate__animated animate__slideInLeft";
    } else {
      transitionName.value = "";
    }
  }
);
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1000;
}

.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
</style>